<template>
    <div>
        <!-- 数据上报 -->
        <el-form :inline="true" :model="params" class="demo-form-inline">
            <el-form-item>
                <el-button type="primary" @click="toUpHandler">上报</el-button>
            </el-form-item>
            <el-form-item>
                <el-input type="text" v-model="params.province" placeholder="省份" clearable></el-input>
                <!-- <el-select  placeholder="省份">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select> -->
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="dataList.list" style="width: 100%"> 
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="country" label="国"></el-table-column>
            <el-table-column prop="province" label="省" width="120"></el-table-column>
            <el-table-column prop="city" label="市"></el-table-column>
            <el-table-column prop="area" label="区"></el-table-column>
            <el-table-column prop="confirmed" label="新增确诊">
                <template slot-scope="scope">
                    <el-tag>{{scope.row.confirmed}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="suspected" label="疑似">
                <template slot-scope="scope">
                    <el-tag type="warning">{{scope.row.suspected}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="dead" label="死亡">
                <template slot-scope="scope">
                    <el-tag type="info">{{scope.row.dead}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="cure" label="治愈">
                <template slot-scope="scope">
                    <el-tag type="success">{{scope.row.cure}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="severe" label="重症">
                <template slot-scope="scope">
                    <el-tag type="danger">{{scope.row.severe}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="outside" label="境外输入"></el-table-column>
            <el-table-column prop="inputTime" label="上报时间" width="150" align="center" >
                <template slot-scope="scope">
                    {{scope.row.inputTime | dateFormat}}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            layout="total, prev, pager, next"
            :page-size="params.pageSize"
            :current-page="params.page"
            @current-change="pageChangeHandler"
            :total="dataList.total">
        </el-pagination>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import moment from 'moment'

export default {
    data() {
        return {
            params: {
                page: 1,
                pageSize: 5
            }
        }
    },
    computed: {
        ...mapState("data",['dataList'])
    },
    created() {
        this.pageQueryData(this.params)
    },
    watch: {
        params: {
            handler() {
                this.pageQueryData(this.params)
            },
            deep: true
        }
    },
    methods: {
        ...mapActions("data",['pageQueryData']),
        // 分页
        pageChangeHandler(page) {
            this.params.page = page;
        },
        // 上报
        toUpHandler() {
            this.$router.push({path:'/data/dataUp'})
        }
    },
}
</script>